把靜態檔案加到 Angular 專案中

前一篇，我們已經學會用 Angular CLI 建立元件及範本，今天我們要試著把靜態檔案加到 Angular CLI 所建立的專案中。

首先，先準備好要加入專案的靜態檔案及資料夾：

• 1. api 資料夾：裡面放了兩個與資料有關的 JSON 檔，之後的實作會用到，屆時再說明。
     
• 2. assets 資料夾：裡面放置了許多資料夾，包含許多靜態檔案，如：字型、圖片、JavaScript 檔等。
     
• 3. drama-blog.html：這是我們主要內容呈現的頁面。

我們把上面所提到的檔案及資料夾，複製到我們專案資料夾的 src 資料夾內。

此時，我們開啟終端機面板，輸入 npm start 指令，把開發伺服器運行起來，並在網址輸入 /drama-blog.html，會發現並沒有反應！

原因是，當我們把靜態檔案複製到 src 資料夾之後，還有一個檔案需要設定，那就是我們專案裡面的 angular.json 檔案。

打開 angular.json 檔案，找到 build 底下的 assets 區塊，如下圖所示。

由於 src/assets 已存在，所以我們只需在這個區塊貼上 src/drama-blog.html 及 src/api 這兩個路徑即可。

接著，我們在終端機面板使用鍵盤 ctrl+c 先停止伺服器運行，再輸入 npm start 指令把伺服器重新運行起來。

接著在伺服器首頁網址處輸入 /drama-blog.html，就可以看到畫面顯示出我們所加入的靜態檔案 drama-blog.html 的內容了。

接著我們試著將網址改成 /api/articles.json，同樣可以看到我們剛才加入的 api 資料夾中的 articles.json 檔案的資料內容。

至此，我們已經順利將靜態檔案加入到 Angular CLI 建置的專案之中了！